<template>

    <div class="app-container">
      <el-row :gutter="10" class="mb8">
        <el-col :span="12">
          <el-button
              type="primary"
              @click="handleSub"
          >提交结果</el-button>
        </el-col>
        <right-toolbar :search="false" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-row :gutter="10" class="mb8">

      </el-row>
      <el-table ref="table" v-loading="tableData.loading" :data="tableData.list">
        <el-table-column width="120" label="仓库" align="center" prop="warehouseName"/>
        <el-table-column label="状态" width="60" align="center" prop="state">
          <template #default="scope">
            <dict-tag :options="inventory_check_item_state" :value="scope.row.state" />
          </template>
        </el-table-column>
        <el-table-column width="120" label="图片" align="center" prop="number">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                placement="right-start">
              <template #content>
                <img alt="" v-if="scope.row.imgUrl" :src="showImg(scope.row.imgUrl)" width="100" height="100" />
              </template>
              <img alt="" v-if="scope.row.imgUrl" :src="showImg(scope.row.imgUrl)" width="30" height="30" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column width="120" label="编码" align="center" prop="number"/>
        <el-table-column width="180" label="名称" align="center" prop="name"/>
        <el-table-column width="120" label="分类" align="center" prop="categoryName"/>
        <el-table-column width="120" label="商品条码" align="center" prop="barcode"/>
        <el-table-column width="120" label="品牌" align="center" prop="brand"/>
        <el-table-column width="120" label="规格型号" align="center" prop="model"/>
        <el-table-column width="120" label="计量单位" align="center" prop="unit"/>
        <el-table-column width="120" label="单价" align="center" prop="price"/>
        <el-table-column width="120" label="应盘数量" align="center" prop="num"/>
        <el-table-column width="120" label="应盘金额" align="center" prop="totalPrice"/>
        <el-table-column width="120" label="实盘数量" align="center" prop="numReal"/>
        <el-table-column width="120" label="实盘金额" align="center" prop="totalPriceReal"/>
        <el-table-column width="120" label="差异" align="center" prop="diff"/>
        <el-table-column width="160" label="盘点备注" align="center" prop="remark"/>
        <el-table-column width="160" label="盘点人" align="center" prop="userName"/>
        <el-table-column width="160" label="盘点时间" align="center" prop="inventoryTime"/>


        <el-table-column label="操作" align="center" fixed="right">
          <template  #default="scope">
            <el-button style="margin-right: 10px;" link type="primary"
                       size="small"
                       @click="handleInventory(scope.row)"
            >盘点</el-button>
          </template>
        </el-table-column>

      </el-table>
      <pagination
          v-show="tableData.paging.total>0"
          :total="tableData.paging.total"
          v-model:page="tableData.paging.pageNum"
          v-model:limit="tableData.paging.pageSize"
          @pagination="getList"
      />
      <inventory-tip-dialog ref="tipDialog"></inventory-tip-dialog>
      <inventory-dialog ref="inventoryDialog" @sub="getList"></inventory-dialog>
    </div>


    
  </template>
  
<script setup>

import { useRoute } from "vue-router";
import api from './api.js'
import InventoryTipDialog from "./InventoryTipDialog.vue";
import InventoryDialog from "./InventoryDialog.vue";

const { proxy } = getCurrentInstance();
const { inventory_check_item_state } = proxy.useDict("inventory_check_item_state");

const router = useRoute();

const sendCardDialog = ref();
const tipDialog = ref();
const inventoryDialog = ref();

// 遮罩层
const loading = ref(false);
// 导出遮罩层
const exportLoading = ref(false);
const table = ref();
const tableData = reactive({
  loading: false,
  list: [], // 表格列表数据
  paging: {
    total: 0, // 总条数
    pageNum: 1,
    pageSize: 10,
  }
});

const initQueryParams = {
  pageNum: 1,
  pageSize: 10,
  number: null,
  name: null,
  categoryId: null,
  rfid: null,
  brand: null,
  model: null,
  buyWay: null,
  buyTime: null,
  buyPrice: null,
  adminId: null
}

const queryParams = reactive({...initQueryParams})

/** 查询资产清单表列表 */
async function getList() {

  const detailId = router.params.detailId;
  loading.value = true;
  const {pageNum, pageSize} = tableData.paging;
  const query = {...queryParams};
  const pageReq = {page: pageNum - 1, size: pageSize};
  api.list(query, pageReq, detailId).then(response => {

    const { content, totalElements } = response
    tableData.list = content;
    tableData.paging.total = totalElements;
    tableData.loading = false;
  });
}

// 表单重置
function reset() {
  Object.assign(queryParams, initQueryParams)
}

/** 搜索按钮操作 */
function handleQuery() {
  tableData.paging.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  reset();
  handleQuery();
}

function showImg(img) {
  return import.meta.env.VITE_APP_BASE_API + img;
}

/** 提交结果按钮操作 */
function handleSub() {
  const detailId = router.params.detailId;
  tipDialog.value.open(detailId);
}

/** 新增按钮操作 */
function handleInventory(row) {

  inventoryDialog.value.open(row);
}


function handleSendCard(row) {
  sendCardDialog.value.open(row);
}


// 页面打开后获取列表数据
onMounted( async () => {
  await getList();
});
</script>
  